<template>
  <div class="app">
    <div class="head">
      <div class="head-logo">
        <div class="head-logo-left">
          <img src="../../assets/img/logo.png" />
          <p><span>{{saveCompanyMsg.companyChiName?saveCompanyMsg.companyChiName:saveCompanyMsg.companyEngName}}</span> </p>
        </div>
        <div class="head-logo-right">
          <div v-show="ifEdit">
            <!-- <el-button icon="el-icon-circle-close" size="small" @click="handleOut">产权退出</el-button> -->
            <el-button icon="el-icon-edit" v-show="canEdit" type="primary" size="small" @click="handleEdit">修改</el-button>
            <el-button icon="el-icon-finished" type="primary" size="small" @click="handleSubmit">提交</el-button>
          </div>
          <div v-show="!ifEdit">
            <el-button size="small" @click="handleCancel">取消</el-button>
            <el-button type="primary" size="small" @click="handleSave">保存</el-button>
          </div>
        </div>
      </div>
      <div class="head-msg">
        <el-row>
          <el-col :span="4">
            <p>招商局代码：<span>{{saveCompanyMsg.cmhkId}}</span></p>
          </el-col>
          <el-col :span="12">
            <p>英文名称：<span>{{saveCompanyMsg.companyEngName}}</span></p>
          </el-col>
          <el-col :span="8">
            <p>注册类型：<span>{{saveCompanyMsg.registerName}}</span></p>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="content">
      <div ref="fileView" class="file-view">
        <el-scrollbar style="height:100%">
          <pdf ref="pdf" :src="fileList.cos_url" :page="currentPage" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler"></pdf>
          <div class="icon-btn">
            <div class="icon-btn-box">
              <cm-icon @click="changePdfPage(0)" class="icon-left" :class="{ grey: currentPage == 1 }" />
            </div>
            <div class="icon-btn-box">
              <cm-icon @click="changePdfPage(1)" class="icon-right" :class="{ grey: currentPage == pageCount }" />
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div class="icon-box">
        <div class="icon-hide">
          <cm-icon @click="handleHide" class="icon-left" v-if="!ifShow" />
          <cm-icon @click="handleShow" class="icon-right" v-if="ifShow" />
        </div>
      </div>
      <div ref="tableView" class="table-view">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="管控信息" name="second" v-if="ifControl">
            <div class="box-card">
              <ControlMsg ref="ControlMsg" :controlMsg="controlMsg" @changeStateControl="changeStateControl" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="注册信息" name="first" v-if="ifRegister">
            <div class="box-card">
              <RegisterMsgForm ref="RegisterMsgForm" :registerForm="registerForm" @changeState="changeState" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="治理机构" name="third" v-if="ifManage">
            <div class="box-card">
              <GoverningBody ref="governingBody" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="股份类别" name="fourth" v-if="ifShares">
            <div class="box-card">
              <ShareType ref="ShareType" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="股东持股" name="sixth" v-if="ifShareMsg">
            <div class="box-card">
              <ShareMsg ref="ShareMsg" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="出资情况" name="seventh" v-if="ifOutmoney">
            <div class="box-card">
              <OutMoney ref="OutMoney" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="出资情况" name="eightth" v-if="ifFriends">
            <div class="box-card">
              <Partner ref="Partner" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="基本信息" name="nineth" v-if="ifBranch">
            <div class="box-card">
              <BasicMsg ref="BasicMsg" :nineth="nineth" @changeStateBranch="changeStateBranch" />
            </div>
          </el-tab-pane>
      </el-tabs>
      </div>
    </div>
    <!-- <Dialog ref="outDialog" :dialogData="dialogData" @on-close="closeDialog" /> -->
  </div>
</template>

<script>
// import Dialog from './components/PROutDialog'
import pdf from 'vue-pdf'
import RegisterMsgForm from './components/RegisterMsg'
import GoverningBody from './components/GoverningBody'
import TableComponent from '@/components/Table/table'
import ControlMsg from './components/ControlMsg'
import ShareType from './components/ShareType'
import ShareMsg from './components/ShareMsg'
import Partner from './components/Partner'
import BasicMsg from './components/BasicMsg'
import OutMoney from './components/OutMoney'
import { handleSubmit, quitTempCompany } from '@/api/modules/propertyRight.js'
export default {
  components: {
    // Dialog,
    RegisterMsgForm,
    GoverningBody,
    TableComponent,
    ControlMsg,
    ShareType,
    ShareMsg,
    Partner,
    BasicMsg,
    OutMoney,
    pdf
  },
  data() {
    return {
      saveCompanyMsg: {
        resource: '',
        taskId: '',
        registerType: '',
        companyChiName: '',
        companyEngName: '',
        economicItem: '',
        cmhkId: '',
        companyCode: '',
        registerName: '',
        editOrAdd: ''
      },
      activeName: '',
      ifRegister: false,
      ifControl: false,
      ifManage: false,
      ifShares: false,
      ifShareMsg: false,
      ifOutmoney: false,
      ifFriends: false,
      ifBranch: false,
      registerForm: {
        ifDisabled: true
      },
      controlMsg: {
        ifDisabled: true
      },
      nineth: {
        ifDisabled: true
      },
      dialogData: {
        dialogVisible: false,
        companyName: '',
        cmhkId: '',
        registerType: '',
        taskId: ''
      },
      ifEdit: true, // tab页切换时重置按钮状态
      canEdit: true, // 不可修改页签隐藏修改按钮
      fileList: {},
      ifShow: true,
      currentPage: 0, // pdf文件页码
      pageCount: 0 // pdf文件总页数
    }
  },
  mounted() {
    // this.saveCompanyMsg = this.$route.query.
    this.saveCompanyMsg.resource = this.$route.query.resource
    this.saveCompanyMsg.taskId = this.$route.query.taskId
    this.saveCompanyMsg.registerType = this.$route.query.registerType
    this.saveCompanyMsg.companyChiName = this.$route.query.companyChiName
    this.saveCompanyMsg.companyEngName = this.$route.query.companyEngName
    this.saveCompanyMsg.cmhkId = this.$route.query.cmhkId
    this.saveCompanyMsg.companyCode = this.$route.query.companyCode
    this.saveCompanyMsg.economicItem = this.$route.query.economicItem
    this.saveCompanyMsg.registerName = this.$route.query.registerName
    this.saveCompanyMsg.editOrAdd = this.$route.query.flag
    this.fileList = this.$route.query.url || {}
    switch (this.saveCompanyMsg.registerType) {
      case '01':
        this.ifRegister = true
        this.ifControl = true
        this.ifManage = true
        this.ifShares = true
        this.ifShareMsg = true
        this.ifFriends = false
        this.ifBranch = false
        this.ifOutmoney = false
        this.activeName = 'second'
        this.$nextTick(() => {
          this.$refs.RegisterMsgForm.addinput()
          this.$refs.RegisterMsgForm.partnerDel()
          this.$refs.governingBody.notpartner()
          this.$refs.ControlMsg.getControlMsg(this.saveCompanyMsg) // 查询管控信息
        })
      break
      case '02':
        this.ifRegister = true
        this.ifControl = true
        this.ifManage = true
        this.ifShares = false
        this.ifShareMsg = false
        this.ifFriends = false
        this.ifBranch = false
        this.ifOutmoney = true
        this.activeName = 'second'
        this.$nextTick(() => {
          this.$refs.RegisterMsgForm.delinput() // 若为有限责任公司注册信息相关表单项隐藏
          this.$refs.RegisterMsgForm.partnerDel()
          this.$refs.governingBody.notpartner()
          this.$refs.ControlMsg.getControlMsg(this.saveCompanyMsg) // 查询管控信息
        })
      break
      case '03':
        this.ifRegister = true
        this.ifControl = true
        this.ifManage = true
        this.ifShares = false
        this.ifShareMsg = false
        this.ifFriends = false
        this.ifBranch = false
        this.ifOutmoney = true
        this.activeName = 'second'
        this.$nextTick(() => {
          this.$refs.RegisterMsgForm.delinput()
          this.$refs.RegisterMsgForm.partnerDel()
          this.$refs.governingBody.notpartner()
          this.$refs.ControlMsg.getControlMsg(this.saveCompanyMsg) // 查询管控信息
        })
      break
      case '04':
        this.ifRegister = true
        this.ifControl = true
        this.ifManage = true
        this.ifShares = false
        this.ifShareMsg = false
        this.ifFriends = true
        this.ifBranch = false
        this.ifOutmoney = false
        this.activeName = 'second'
        this.$nextTick(() => {
          this.$refs.RegisterMsgForm.delinput()
          this.$refs.governingBody.ispartner() // 若为合伙企业则治理机构只显示管理层
          this.$refs.RegisterMsgForm.partnerAdd() // 若为合伙企业则添加三个字段
          this.$refs.ControlMsg.getControlMsg(this.saveCompanyMsg) // 查询管控信息
        })
      break
      case '05':
        this.ifRegister = false
        this.ifControl = false
        this.ifManage = false
        this.ifShares = false
        this.ifShareMsg = false
        this.ifFriends = false
        this.ifBranch = true
        this.ifOutmoney = false
        this.activeName = 'nineth'
        this.$nextTick(() => {
          this.$refs.BasicMsg.getBranchMsg(this.saveCompanyMsg) // 查询基本信息数据
          this.$refs.BasicMsg.cmbusinessTypes() // 查询基本信息中的下拉接口
        })
      break
    }
    // 根据产权登记情形
    // this.dialogData.companyName = this.$route.query.companyName
    // this.dialogData.cmhkId = this.$route.query.cmhkId
    // this.dialogData.registerType = this.$route.query.registerType
    // this.dialogData.taskId = this.$route.query.taskId
    // const ifEdit = this.$route.query.economicItem
    // if (ifEdit === '11' || ifEdit === '35' || ifEdit === '07' || ifEdit === '08') {
    //   this.dialogData.dialogVisible = true
    //   this.$nextTick(() => {
    //     this.$refs.outDialog.initData()
    //     this.$refs.ControlMsg.ifExitThing()
    //   })
    // } else {
      
    // }
  },
  methods: {
    handleClick(val) {
      this.activeName = val.name
      this.ifEdit = true
      switch(val.name) {
        case 'first':
          // 切换tab时 重置表单不可用状态
          this.registerForm.ifDisabled = true
          this.controlMsg.ifDisabled = true
          this.canEdit = true
          this.$refs.RegisterMsgForm.getRegisterinfo(this.saveCompanyMsg) // 查询注册信息
          this.$refs.RegisterMsgForm.getOption() // 注册信息中的下拉框数据初始化
          break
        case 'second':
          // 切换tab时 重置表单不可用状态
          this.registerForm.ifDisabled = true
          this.controlMsg.ifDisabled = true
          this.canEdit = true
          this.$refs.ControlMsg.getControlMsg(this.saveCompanyMsg) // 查询管控信息
          break
        case 'third':
          // 切换tab时 重置表单不可用状态
          this.registerForm.ifDisabled = true
          this.controlMsg.ifDisabled = true
          this.canEdit = false
          this.$refs.governingBody.getGovernmentBody(this.saveCompanyMsg) // 查询治理机构
          break
        case 'fourth':
          // 切换tab时 重置表单不可用状态
          this.registerForm.ifDisabled = true
          this.controlMsg.ifDisabled = true
          this.canEdit = false
          this.$refs.ShareType.getShareType(this.saveCompanyMsg) // 查询股份类别
        break
        case 'sixth':
          // 切换tab时 重置表单不可用状态
          this.registerForm.ifDisabled = true
          this.controlMsg.ifDisabled = true
          this.canEdit = false
          this.$refs.ShareMsg.getShareMsg(this.saveCompanyMsg) // 查询股份类别
        break
        case 'seventh':
          // 切换tab时 重置表单不可用状态
          this.registerForm.ifDisabled = true
          this.controlMsg.ifDisabled = true
          this.canEdit = false
          this.$refs.OutMoney.queryOutMoneyMethods(this.saveCompanyMsg) // 查询股份类别
        break
        case 'eightth':
          // 切换tab时 重置表单不可用状态
          this.registerForm.ifDisabled = true
          this.controlMsg.ifDisabled = true
          this.canEdit = false
          this.$refs.Partner.getPartner(this.saveCompanyMsg) // 查询合伙人信息
        break
        case 'nineth':
          // 切换tab时 重置表单不可用状态
          this.registerForm.ifDisabled = true
          this.controlMsg.ifDisabled = true
          this.canEdit = true
          this.$refs.BasicMsg.getBranchMsg(this.saveCompanyMsg) // 查询基本信息数据
        break
      }
    },
    // 点击修改
    handleEdit() {
      switch (this.activeName) {
        case 'first':
          this.ifEdit = false
          this.registerForm.ifDisabled = false
          break
        case 'second':
          this.ifEdit = false
          this.controlMsg.ifDisabled = false
          break
        case 'nineth':
          this.ifEdit = false
          this.nineth.ifDisabled = false
          break
      }
    },
    // 点击取消
    handleCancel() {
      switch (this.activeName) {
        case 'first':
          this.ifEdit = true
          this.registerForm.ifDisabled = true
          this.$refs.RegisterMsgForm.removeRequired()
          this.$refs.RegisterMsgForm.getRegisterinfo(this.saveCompanyMsg) // 查询注册信息
          this.$message('取消注册信息修改')
          break
        case 'second':
          this.ifEdit = true
          this.controlMsg.ifDisabled = true
          this.$refs.ControlMsg.removeRequired()
          this.$refs.ControlMsg.getControlMsg(this.saveCompanyMsg) // 查询管控信息
          this.$message('取消管控信息修改')
          break
        case 'nineth':
          this.ifEdit = true
          this.nineth.ifDisabled = true
          this.$refs.BasicMsg.getBranchMsg(this.saveCompanyMsg)
          this.$message('取消基本信息修改')
          break
      }
    },
    // 点击保存
    handleSave() {
      if (this.activeName === 'first') {
        this.$refs.RegisterMsgForm.editRegisterinfo() // 修改注册信息
      } else if (this.activeName === 'second') {
        this.$refs.ControlMsg.editControlMsg() // 修改管控信息
      } else if (this.activeName === 'nineth') {
        this.$refs.BasicMsg.editBranchMsg() // 修改基本信息
      }
    },
    // 保存后修改按钮状态
    changeState(val) {
      this.ifEdit = val
      this.registerForm.ifDisabled = val
    },
    changeStateControl() {
      this.ifEdit = true
      this.controlMsg.ifDisabled = true
    },
    changeStateBranch() {
      this.ifEdit = true
      this.nineth.ifDisabled = true
    },
    // 产权退出
    // handleOut() {
    //   this.dialogData.dialogVisible = true
    //   this.$refs.outDialog.initData()
    // },
    // 弹窗组件关闭时
    closeDialog(val) {
      this.dialogData.dialogVisible = false
      this.dialogData.companyName = ''
      this.dialogData.cmhkId = ''
      this.dialogData.registerType = ''
      this.dialogData.taskId = ''
      if (val.isRefresh) {
        this.activeName = 'second'
        this.registerForm.ifDisabled = true
        this.controlMsg.ifDisabled = true
        this.canEdit = true
        this.$refs.ControlMsg.getControlMsg(this.saveCompanyMsg) // 查询管控信息
      }
    },
    // 点击提交
    handleSubmit() {
      this.$confirm('确认提交', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        handleSubmit(this.saveCompanyMsg).then(res => {
          if (res.data.code === '0') {
            this.$message.success('提交成功')
            this.$router.push('/propertyRegister')
          } else {
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消提交'
        })
      })
    },
    // 文件域============================
    changePdfPage (val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++
      }
    },
    loadPdfHandler (e) {
      this.currentPage = 1 // 加载的时候先加载第一页
    },
    // 点击隐藏文件域
    handleHide() {
      this.$refs.fileView.style.width = 0
      this.$refs.tableView.style.width = 'calc(100% - 15px)'
      this.ifShow = true
    },
    handleShow() {
      this.$refs.fileView.style.width = '35%'
      this.$refs.tableView.style.width = '65%'
      this.ifShow = false
    }
  }
}
</script>

<style lang="less" scoped>
  .app {
    height: calc(100vh - 60px);
    .head {
      width: calc(100% - 60px);
      padding: 10px 30px;
      height: 70px;
      background-color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .head-logo {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .head-logo-left {
          display: flex;
          align-items: center;
          p {
            font-size: 16px;
            font-weight: 500;
            margin-left: 10px;
          }
          img {
            width: 24px;
            height: 24px;
          }
        }
      }
      .head-msg {
        height: 40px;
        line-height: 20px;
        p {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.850980392156863);
          span {
            color: rgba(0, 0, 0, 0.650980392156863);
          }
        }
      }
    }
    .content {
      display: flex;
      width: 100%;
      height: calc(100% - 105px);
      background-color: #ffffff;
      margin-top: 10px;
      .icon-box {
        height: 100%;
        display: flex;
        align-items: center;
      }
      .file-view {
        width: 0%;
        height: 100%;
        overflow: auto;
        position: relative;
        .icon-btn {
          width: 100%;
          height: 40px;
          line-height: 40px;
          display: flex;
          background-color: #f0f0f0;
          .icon-btn-box {
            width: 50%;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .grey {
            display: none;
          }
        }
      }
      .icon-hide {
        width: 15px !important;
        height: 15px;
      }
      .table-view {
        width: calc(100% - 15px);
      }
      .box-card {
        height: calc(100vh - 230px);
        overflow: auto;
      }
    }
  }
</style>
<style>
  .el-card {
    border: none;
  }
  .el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 15px;
    margin-left: 20px;
  }
  .el-scrollbar__wrap{
    overflow-x: hidden;
  }
  body .el-scrollbar__wrap {
    overflow-x: hidden;
  }
</style>